<template>
    <div class="p-grid p-fluid">
        <div class="p-col-12 p-md-4">
            <div class="card">
                <h5>基本信息</h5>
                <div class="profile-avatar-container">
                    <img class="profile-user-img img-responsive img-circle" :src="avatar" alt="头像">
                    <div class="profile-avatar-text img-circle" @click="choiceImg">点击编辑</div>
                    <input ref="filElem" :fileList="imgList" class="input-plupload" @change='add_img' type="file">
                </div>
                <h3 class="profile-username text-center">{{username}}</h3>
                <p class="text-muted text-center">{{email}}</p>

                <h5>用户名</h5>
                <InputText id="username" v-model="username" placeholder="请输入用户名" type="text" :disabled="true"/>
                <h5>姓名</h5>
                <InputText id="nickname" v-model="nickname" placeholder="" type="text" :disabled="true"/>
                <h5>工号
                    <span v-if="job_status===true" class="p-tag p-tag-success">状态：正常</span>
                    <span v-if="job_status===false" class="p-tag p-tag-warning">状态：禁用</span>
                </h5>
                <InputText id="job_number" v-model="job_number" placeholder="" type="text" :disabled="true"/>
                <h5>绑定手机号</h5>
                <InputText id="mobile" v-model="mobile" placeholder="" type="text" :disabled="true"/>
                <h5>登录密码</h5>
                <InputText id="password" v-model="password" placeholder="不修改密码请留空" type="text"/>
                <div class="p-mb-4"></div>
                <Button @click="updateInfo" label="保存" class="p-col-4 p-mr-2 p-mb-2"></Button>
            </div>
        </div>

        <div class="p-col-12 p-md-8">
            <div class="card">
                <h5>提现支付宝</h5>
                <h5>账号</h5>
                <InputText id="alipay_account" v-model="alipay_account" placeholder="支付宝账号" type="text"/>
                <h5>姓名</h5>
                <InputText id="alipay_name" v-model="alipay_name" placeholder="支付宝认证姓名" type="text"/>
                <h5>支付宝收款码</h5>
                <div class="p-col-4 p-md-3">
                    <Button label="上传收款码" icon="pi pi-cloud-upload" iconPos="left" @click="choiceAddImg"/>
                </div>
                <input ref="filElem2" class="input-plupload" :fileList="imgList2" @change='add_make_img_change'
                       type="file">
                <div style="position: relative; width: 200px; margin: 0 auto;">
                    <img width="200px" :src="add_make_img" alt="收款码">
                </div>

                <h5>短信验证码</h5>
                <div class="p-inputgroup">
                    <InputText v-model="phone_code" placeholder="验证手机已确认操作"/>
                    <Button v-show="phone_code_show" @click="getPhoneCode" label="发送"/>
                    <Button v-show="!phone_code_show" :label="phone_code_counts"/>
                </div>
                <div class="p-mb-4"></div>
                <Button @click="updateCash" label="提交" class="p-button-success p-col-6 p-mr-2 p-mb-2"></Button>
            </div>

            <div class="card">
                <h5>绑定/换绑邮箱，接收重要通知</h5>
                <h5>邮箱</h5>
                <InputText id="email" v-model="email" placeholder="请输入常用邮箱" type="text"/>
                <h5>邮箱验证码</h5>
                <div class="p-inputgroup">
                    <InputText v-model="email_code" placeholder="验证邮箱已确认操作"/>
                    <Button v-show="email_code_show" @click="getEmailCode" label="发送"/>
                    <Button v-show="!email_code_show" :label="email_code_counts"/>
                </div>
                <div class="p-mb-4"></div>
                <Button @click="updateEmali" label="提交" class="p-button-info p-col-6 p-mr-2 p-mb-2"></Button>

            </div>
        </div>
    </div>
</template>

<script>
    import request from '@/utils/request'
    import UploadService from '@/api/UploadService';

    export default {
        data() {
            return {
                phone_code_show: true,
                phone_code_count: '',
                phone_code_counts: "60秒后可重试",
                phone_code_timer: null,
                email_code_show: true,
                email_code_count: '',
                email_code_counts: "60秒后可重试",
                email_code_timer: null,
                UploadService: null,
                avatar: '/favicon.ico',
                mobile: null,
                job_number: null,
                job_status: false,
                username: null,
                nickname: null,
                password: null,
                alipay_account: null,
                alipay_name: null,
                add_make_img: null,
                phone_code: null,
                email: null,
                email_code: null,
                imgList: null,
                imgList2: null,
            }
        },
        mounted() {
            this.getInfo();
            this.UploadService = new UploadService();
        },
        methods: {
            updateCash() {
                request.post('/user/update_cash', {
                    mobile: this.mobile,
                    event: 'modified_withdrawal',
                    captcha: this.phone_code,
                    alipay_account: this.alipay_account,
                    alipay_name: this.alipay_name,
                    add_make_img: this.add_make_img,
                })
                    .then(response => {
                        if(response.code === 20000){
                            this.$toast.add({
                                severity: 'success',
                                summary: '提示',
                                detail: response.msg,
                                life: 3000
                            });
                            this.phone_code = null;
                        }

                    })
                    .catch(error => {
                        this.$toast.add({
                            severity: 'warn',
                            summary: '提示',
                            detail: '发生错误：' + JSON.stringify(error),
                            life: 3000
                        });
                    });
            },
            getPhoneCode() {
                request.post('/api/send_sms', {
                    mobile: this.mobile,
                    event: 'modified_withdrawal'
                })
                    .then(response => {
                        if(response.code === 20000){
                            this.$toast.add({
                                severity: 'success',
                                summary: '提示',
                                detail: response.msg,
                                life: 3000
                            });
                        }
                        if (response.code === 20000) {
                            const PHONE_CODE_TIME_COUNT = 60;
                            if (!this.phone_code_timer) {
                                this.phone_code_count = PHONE_CODE_TIME_COUNT;
                                this.phone_code_show = false;
                                this.phone_code_timer = setInterval(() => {
                                    if (this.phone_code_count > 0 && this.phone_code_count <= PHONE_CODE_TIME_COUNT) {
                                        this.phone_code_count--;
                                        this.phone_code_counts = this.phone_code_count + '秒后可重试';
                                    } else {
                                        this.phone_code_show = true;
                                        clearInterval(this.phone_code_timer);
                                        this.phone_code_timer = null;
                                    }
                                }, 1000)

                            }
                        }
                    })
                    .catch(error => {
                        this.$toast.add({
                            severity: 'warn',
                            summary: '提示',
                            detail: '发生错误：' + JSON.stringify(error),
                            life: 3000
                        });
                    });
            },
            updateEmali() {
                request.post('/user/update_email', {
                    email: this.email,
                    captcha: this.email_code,
                })
                    .then(response => {
                        if(response.code === 20000){
                            this.$toast.add({
                                severity: 'success',
                                summary: '提示',
                                detail: response.msg,
                                life: 3000
                            });
                            this.email_code = null;
                        }

                    })
                    .catch(error => {
                        this.$toast.add({
                            severity: 'warn',
                            summary: '提示',
                            detail: '发生错误：' + JSON.stringify(error),
                            life: 3000
                        });
                    });
            },
            getEmailCode() {
                request.post('/api/send_ems', {
                    email: this.email,
                    event: 'update_email',
                    content:'您正在修改账号绑定邮箱，如非本人操作请立即修改账号密码！',
                })
                    .then(response => {
                        if(response.code === 20000){
                            this.$toast.add({
                                severity: 'success',
                                summary: '提示',
                                detail: response.msg,
                                life: 3000
                            });
                        }
                        if (response.code === 20000) {
                            const EMAIL_CODE_TIME_COUNT = 60;
                            if (!this.email_code_timer) {
                                this.email_code_count = EMAIL_CODE_TIME_COUNT;
                                this.email_code_show = false;
                                this.email_code_timer = setInterval(() => {
                                    if (this.email_code_count > 0 && this.email_code_count <= EMAIL_CODE_TIME_COUNT) {
                                        this.email_code_count--;
                                        this.email_code_counts = this.email_code_count + '秒后可重试';
                                    } else {
                                        this.email_code_show = true;
                                        clearInterval(this.email_code_timer);
                                        this.email_code_timer = null;
                                    }
                                }, 1000)

                            }
                        }
                    })
                    .catch(error => {
                        this.$toast.add({
                            severity: 'warn',
                            summary: '提示',
                            detail: '发生错误：' + JSON.stringify(error),
                            life: 3000
                        });
                    });
            },
            updateInfo() {
                if (this.password === null) {
                    this.$toast.add({severity: 'success', summary: '提示', detail: '保存成功', life: 3000});
                    return;
                }
                let params = {
                    password: this.password
                };
                request.post('/user/update_info', params)
                    .then(response => {
                        if(response.code === 20000){
                            this.$toast.add({
                                severity: 'success',
                                summary: '提示',
                                detail: response.msg,
                                life: 3000
                            });
                        }
                    })
                    .catch(error => {
                        this.$toast.add({
                            severity: 'warn',
                            summary: '提示',
                            detail: '发生错误：' + JSON.stringify(error),
                            life: 3000
                        });
                    });
            },
            getInfo() {
                request.get('/user/info', {})
                    .then(response => {
                        if (response.code !== 20000) {
                            return;
                        }
                        this.username = response.data.username;
                        this.email = response.data.email;
                        this.mobile = response.data.mobile;
                        this.nickname = response.data.nickname;
                        this.avatar = response.data.avatar;
                        this.job_status = response.data.job_status !== 0;
                        this.job_number = response.data.job_number;
                        if (response.data.cash !== null) {
                            let cash = JSON.parse(response.data.cash);
                            this.alipay_account = cash.alipay_account;
                            this.alipay_name = cash.alipay_name;
                            this.add_make_img = cash.add_make_img;
                        }
                        console.log(response.data);
                    })
                    .catch(error => {
                        console.log('出错：' + JSON.stringify(error));
                    });
            },
            choiceImg() {
                this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
            },
            choiceAddImg() {
                this.$refs.filElem2.dispatchEvent(new MouseEvent('click'))
            },
            onUpload() {
                this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
            },
            test() {
                this.onUpload();
            },
            add_make_img_change(event) {
                let check = this.UploadService.check(event);
                if (check.code !== 20000) {
                    this.$toast.add({severity: 'info', summary: '提示', detail: check.msg, life: 3000});
                    return;
                }
                this.UploadService.post(check.data).then(data => {
                    console.log('data:' + JSON.stringify(data));
                    if (data.code !== 20000) {
                        this.$toast.add({severity: 'info', summary: '提示', detail: data.msg, life: 3000});
                        return;
                    }
                    this.add_make_img = data.data[0].full_path;
                });
            },
            add_img(event) {
                let check = this.UploadService.check(event);
                if (check.code !== 20000) {
                    this.$toast.add({severity: 'info', summary: '提示', detail: check.msg, life: 3000});
                    return;
                }
                this.UploadService.post(check.data).then(data => {
                    console.log('data:' + JSON.stringify(data));
                    if (data.code !== 20000) {
                        this.$toast.add({severity: 'info', summary: '提示', detail: data.msg, life: 3000});
                        return;
                    }
                    request.post('/user/update_avatar', {
                        avatar: data.data[0].full_path,
                    })
                        .then(response => {
                            if(response.code === 20000){
                                this.$toast.add({
                                    severity: 'success',
                                    summary: '提示',
                                    detail: response.msg,
                                    life: 3000
                                });
                                this.avatar = data.data[0].full_path;
                            }
                        })
                        .catch(error => {
                            this.$toast.add({
                                severity: 'warn',
                                summary: '提示',
                                detail: '发生错误：' + JSON.stringify(error),
                                life: 3000
                            });
                        });
                });
            },

        }
    }
</script>

<style scoped>

    .profile-avatar-container {
        position: relative;
        width: 100px;
        margin: 0 auto;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
        border: 3px solid #ddd;
        padding: 3px;
        background: #fff;
        border-radius: 50%;
    }

    .profile-avatar-container .profile-avatar-text {
        border-radius: 50%;
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }

    .input-plupload {
        display: none;
    }

    .profile-username {
        font-size: 21px;
        margin-top: 5px;
    }

    .text-center {
        text-align: center;
    }

    .text-muted {
        color: #777777;
    }

</style>
